<template>
    <div v-if="!item.hidden" class="MenuItem" id="MenuItems">
        <!-- <router-link v-if="checkRouteType(item) === 'link'" :to="wrapRouterLink(item)" replace> -->
        <el-menu-item
            v-if="checkRouteType(item) === 'link' && item.isVisible==='1'"
            :index="item.routerName||'link'"
            ref="menuref"
            @click="handleClickLink(item)"
        >
            <i v-if="showIcon(item)" :class="item.menuIcon+' el-menu-icon'"></i>
            <span v-if="!isCollapseoff">{{ item.menuName }}</span>
        </el-menu-item>
        <!-- </router-link> -->
        <!-- v-if="checkRouteType(item) === 'sub' && item.isVisible==='1'" -->
        <el-submenu
            v-if="checkRouteType(item) === 'sub'"
            :index="item.routerName || item.menuName"
            :title="item.menuName"
        >
            <template slot="title">
                <i v-if="showIcon(item)" :class="item.menuIcon+' el-menu-icon'"></i>
                <span v-if="!isCollapseoff">{{ item.menuName }}</span>
            </template>
            <menu-item v-for="(itemchild,index) in item.child" :item="itemchild" :key="index"></menu-item>
        </el-submenu>

        <!-- </div> -->
    </div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
import { isEmpty } from '@/utils/Common';
import { eachProp, isEmptyObject } from '@/utils/Object';
import { commonMenuCheck } from '@/utils/menuRules';
import { getToken, getTokenHsbankNo } from '@/utils/auth';

export default {
    name: 'MenuItem',
    data() {
        return {
            MParams: '',//工单路径用的URl 参数
            tsurl: '',//工作流投诉工单url
            byurl: '',//工作流表扬类工单url
        }
    },
    props: {
        item: {
            type: Object,
            required: true,
        },
        isCollapseoff: {
            type: Boolean,
        }

    },
    computed: {
        // 取出侧边导航的宽
        ...mapGetters([
            'sideBarItemWidth',
            // 'sideBarCollapse',//用来判断菜单 展开，（true）缩放
            'customerInfo_3002',
            'cardInfo_3004',
            'currentSessionObj',
            'checAllData',//
            'defaultParams',
            'globalVariable',
            'isActiveMenu',//当前菜单top
            // 工单系统所用字段
            'cardList_3601',
            'currentSessionObj',
            'CreditCardService_3014',
            'flowserverBackendUrl',
        ]),

    },
    mounted() {
        // console.log('this.item___munuItem', this.item);  
        // console.log('this.sideBarItemWidth123', this.sideBarItemWidth); 
        //await this.getParamsURL();
    },
    updated() {
        console.log('this.sideBarItemWidth456', this.sideBarItemWidth);
    },
    methods: {
        async getParamsURL() {
            await this.$post.Params.searchListByParam({ paramType: 'flowserver_ts_addr_url' }).then((res) => {
                if (res.data.success) {
                    const arr = JSON.parse(JSON.stringify(res.data.content));
                    arr.forEach((item) => {
                        if (item.paramCode === 'flowserver_ts_addr_url') {
                            // this.paramsObj[item.paramCode] = item.paramValue;
                            this.tsurl = item.paramValue;
                        }
                        if (item.paramCode === 'flowserver_by_addr_url') {
                            // this.paramsObj[item.paramCode] = item.paramValue;
                            this.byurl = item.paramValue;
                        }
                    });
                    console.log('ts', this.tsurl, 'by', this.byurl);
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
        // 路由菜单点击事件
        async handleClickLink(rout, keyPath) {
            // console.log(rout.routerName, '当前选择菜单数据');
            console.log(rout, '菜单对象');
            //console.log(rout.rules, '当前选择菜单数据');
            // console.log('keyPath', keyPath);
            // console.log(routeItem, 'routeItem');
            const routeItem = rout.routerName;
            // 菜单权限控制 生效与业务菜单 menuName="业务系统"
            // 是否验密通过
            // currentSessionObj.ivrData.data.AUTH  1,''
            // category = 2 业务菜单
            if (rout.category === '2') {
                // console.log('进来了看看业务菜单', rout.category);
                // console.log('菜单名称', rout.menuName);
                this.$store.dispatch('common/setDefaultBusiNameFun', rout.menuName);
                // if (this.currentSessionObj.ivrData.data.AUTH !== '1') {
                //     this.$alert('当前卡号验密没通过，无法访问菜单!', '验密提示', {
                //         customClass: 'warning', type: 'warning',
                //     }); return;
                // }
                // console.log('看看3 是否进入到这里', rout.routerName);
                if (!this.isActiveMenu) this.$store.commit('menu/UPDATE_ACTIVE_MENU', true);

                const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
                const customerInfo_3002 = JSON.parse(JSON.stringify(this.customerInfo_3002));
                const cardInfo_3004 = JSON.parse(JSON.stringify(this.cardInfo_3004));
                // 放开 部分页面 不需要进线 可以进入 申请进度查询 和 手机号查询证件号
                if (!this.globalVariable.isCoilIn) {
                    if (rout.routerName != '/businessTransactions/applicationProgress' && rout.routerName != '/businessSystem/MobilePhone'
                        && rout.routerName != '/businessTransactions/tsptJump' && rout.routerName != '/businessTransactions/tsptlogin') {
                        this.$alert('客户未进线，不能操作业务菜单', '菜单校验', {
                            customClass: 'warning', type: 'warning',
                            center: true,
                            showClose: false
                        });
                    }

                }
                // console.log('rout.menuName________菜单为什么没有录入', rout.menuName);
                // 给请求报文加菜单名称
                defaultParams.sysHead.busiName = rout.menuName;
                this.$store.commit('common/UPDATE_DEFAULT_PARAMS', defaultParams);
                // 判断3002 不能为空
                if (!isEmptyObject(customerInfo_3002)) {
                    const params = {
                        agentNo: defaultParams.sysHead.loginID, // 坐席工号
                        bankNum: defaultParams.body.appHead.bnknbr, // 银行号
                        businessName: defaultParams.sysHead.busiName, // 业务名称
                        callId: defaultParams.sysHead.sessionID, // 会话ID
                        // createTime: new Date(), // 创建时间
                        menuName: rout.menuName, // 菜单名称
                        cardNo: cardInfo_3004.CARDNO, // 卡号
                        certificateType: customerInfo_3002.KEYTYPE, // 证件类型
                        certificate: customerInfo_3002.CUSTID, // 证件号
                        custName: customerInfo_3002.CHINAME, // 客户名称
                        phone: customerInfo_3002.MOBILEPHONE, // 客户手机号
                    };
                    // 新增坐席操作轨迹
                    this.$post.common.addOptTrail(params).then((res) => {
                        if (res.data.success) {

                        } else {
                            this.$message.error('坐席操作轨迹添加失败！')
                        }
                    });
                }
                let checkFlag = { flag: true, SAFETY: 'none' }; // 菜单校验标志 -> 默认为校验成功
                // 如果路由验证规则有数据则进入当前逻辑进行验证
                if (rout.rules && rout.rules.length) {
                    // 调用方法判断是否需要验证
                    // console.log('需要校验的菜单和校验项__rout.rout', rout.rules);
                    // console.log('菜单点击时输出一下所有的校验规则---------------checAllData', this.checAllData);

                    checkFlag = await commonMenuCheck(rout.rules, this.checAllData, this);
                    console.log('checkFlag', checkFlag);
                }
                if (checkFlag.flag) {
                    this.$router.push({ path: routeItem });
                }
                // 更新当前 的菜单数据 再缓存里
                const menuObj = {
                    id: rout.id,
                    menuName: rout.menuName,
                    routerName: rout.routerName,
                }
                // 这块是 保存菜单数据 给话术用的 定义到 指定话术
                this.$store.commit('menu/UPDATE_ISCURRENTER_INFO', menuObj);


                // 如果风险验证，跳转至风险验证, 如果前面已经有未验证通过的了就不再继续风险验证
                // if (checkFlag.SAFETY === 'high' && checkFlag.flag) {
                //     // 再次确定是否高风险验证
                //     const confirmResult = await this.$confirm(
                //         '当前操作需要进行高风险验证, 是否继续?',
                //         '高风险验证提示',
                //         {
                //             confirmButtonText: '确定',
                //             cancelButtonText: '取消',
                //             customClass: 'warning', type: 'warning',
                //             showClose: false,
                //         },
                //     ).catch(err => err);
                //     if (confirmResult !== 'confirm') return this.$message.info('已取消高风险验证');
                //     this.$router.push('/authentication/randomHeightRisklevel');
                // } else if (checkFlag.SAFETY === 'medium' && checkFlag.flag) {
                //     // 再次确定是否中高风险验证
                //     const confirmResult = await this.$confirm(
                //         '当前操作需要进行中风险验证, 是否继续?',
                //         '中风险验证提示',
                //         {
                //             confirmButtonText: '确定',
                //             cancelButtonText: '取消',
                //             customClass: 'warning', type: 'warning',
                //             showClose: false,
                //         },
                //     ).catch(err => err);
                //     if (confirmResult !== 'confirm') return this.$message.info('已取消中风险验证');
                //     this.$router.push('/authentication/randommiddlerisklevel');
                // } else if (checkFlag.flag) {
                //     // 验证通过跳转至功能页面

                //     this.$router.push({ path: routeItem });
                // }
            } else {
                console.log('看看1 是否进入到这里', rout.routerName);

                // 坐席首页 和 客户视图 虽然不是业务菜单 但是这两个页面 不显示tab按钮 
                if (rout.routerName == '/businessSystem/defaultPageItem' || rout.routerName == '/index/home') {
                    console.log('看看2 是否进入到这里', rout.routerName);
                    this.$store.commit('menu/UPDATE_ACTIVE_MENU', true);
                } else {
                    // 当 点击工单系统 时  isActiveMenu 为 true  body的class 为app_body
                    //  如果 if 为 true 时 表示 不是 工单系统菜单  当 isActiveMenu 为 true 时 改为 false
                    if (rout.routerName.indexOf('/ticketPaging/midlePage/') < 0) {
                        if (this.isActiveMenu) this.$store.commit('menu/UPDATE_ACTIVE_MENU', false);
                    }
                }
                if (this.$route.path !== routeItem) {
                    // 判断是否是工单系统页面 
                    if (rout.routerName.indexOf('/ticketPaging/midlePage/') >= 0) {
                        console.log('输出数值', rout);
                        console.log('检查id的输出', routeItem, rout.routerName);
                        this.MParams = routeItem.slice(24)
                        console.log('routeItem', this.MParams);//24
                        await this.getParamsURL();
                        this.setPageValue();
                    } else {
                        this.$router.push({ path: routeItem });
                    }
                }
            }
        },

        showIcon(item) {
            return item.menuIcon && !isEmpty(item.menuIcon);
        },
        // 检查某个路由节点是叶子菜单还是非叶子菜单（叶子菜单：可以直接点击路由到某个链接）
        checkRouteType(route) {
            // 如果没有子路由，则一定是叶子菜单
            if (!route.child || route.child.length === 0) {
                return 'link';
            }

            // 如果具有子路由，检查子路由中非隐藏路由的个数
            let flag = 0;
            eachProp(route.child, (child) => {
                if (!child.hidden) {
                    flag += 1;
                }
            });

            if (flag === 0) {
                // 如果子路由都是隐藏路由，则父路由显示为叶子菜单
                return 'link';
            }
            // console.log('route.name'+route.menuName);
            return 'sub';
        },
        wrapRouterLink(item) {

            const route = {
                params: {
                    jumpFlag: true,
                },
            };

            if (item.name) {
                route.name = item.name;
            } else if (item.routerName) {
                route.path = this.wrapRouterPath(item.routerName);
            } else {
                route.path = '/404';
            }

            return route;
        },
        wrapRouterPath(path) {
            if (isEmpty(path)) {
                return '';
            }
            if (path.charAt(0) !== '/') {
                return `/${path}`;
            }
            return path;
        },
        handleClickMenu(val) {
            console.log('handleClickMenu', val.route);
            if (this.$route.path !== val.route) {
                this.$router.push({
                    path: val.route,
                });
            }

            // this.$route.path = val.route;// this.$refs.menuref.route
        },

        // 创建 工单系统需要的页面 且 把工单系统需要的参数 输出过去
        setPageValue() {
            const userInfo = JSON.parse(getToken());
            console.log('userInfo', userInfo);
            console.log('输出vuex 里缓存的——————flowserverBackendUrl ', this.flowserverBackendUrl);
            // const params = JSON.parse(sessionStorage.getItem('serviceData')) || {};
            //const iframeSrcS = `/ccwf/com.cupd.crs.model.submit.d?WFTYPECODE=${this.MParams}`;
            let iframeSrcS = '';
            if (this.MParams + '' === '4602') {
                //工作流投诉工单特殊处理，投诉工单和其他工单路径不同
                iframeSrcS = `${this.tsurl}?WFTYPECODE=${this.MParams}`;
            } else if (this.MParams + '' === '4604') {
                //工作流表扬工单特殊处理，投诉工单和其他工单路径不同
                iframeSrcS = `${this.byurl}?WFTYPECODE=${this.MParams}`;
            } else {
                iframeSrcS = `${this.flowserverBackendUrl}?WFTYPECODE=${this.MParams}`;
            }


            // this.iframeSrc = `/ccwf/com.cupd.crs.model.submit.d?WFTYPECODE=${this.MParams}`;
            // // 创建一个表单
            const form = document.createElement('form');
            form.action = iframeSrcS;
            form.method = 'post';
            form.target = '_blank';
            // form.target = 'submitIframe'
            form.enctype = 'UTF-8'
            // form.style.display = 'none';
            form.classList = 'formstyleNo'
            const data = {
                USERID: userInfo.userAccount, // 受理坐席
                // BANKACCT: params.bankNum, // 银行号
                BANKACCT: getTokenHsbankNo('HsbankNo'), // 银行号
                CUSTNAME: encodeURIComponent(this.customerInfo_3002.CHINAME) || '', // 客户名称
                // CARDADDRESS:'',// 联系地址
                CREDITNO: this.cardInfo_3004.CARDNO ? this.cardInfo_3004.CARDNO.trim() : '', // 卡号
                WSTYPECODE: this.MParams || '', // 工单类型
                // WSTYPECODE: '1001', // 工单类型    
                CUSTTELIN: this.currentSessionObj.ani || '', // 客户来电
                CUSTSEX: this.customerInfo_3002.GENDER, // 客户性别
                CUSTCERTTYPE: this.customerInfo_3002.KEYTYPE ? this.customerInfo_3002.KEYTYPE.trim() : '', // 证件类型
                CUSTCERTNO: this.customerInfo_3002.CUSTID || '', // 证件号码
                MOBILE: this.customerInfo_3002.MOBILEPHONE ? this.customerInfo_3002.MOBILEPHONE.trim() : '', // 预留手机号
                CALLID: userInfo.userAccount || '', // 座席系统CallID
                BILLEMAIL: this.CreditCardService_3014.EMAIL ? this.CreditCardService_3014.EMAIL.trim() : '', // 客户邮箱
                BILLADD: encodeURIComponent(this.CreditCardService_3014.ADD1 + ' ' + this.CreditCardService_3014.ADD2 + '' + this.CreditCardService_3014.ADD3 + '' + this.CreditCardService_3014.ADD4), // 账单地址
                POSTCODE: '', // 客户有邮编
                PRODUCT: '', // 卡组织
                TRANSLIST: '', // 普通类型与争议类型不同，格式不固定
                TRANSDESC: '', // 交易描述（中文）、产品描述（中文）
                CARDSTATE: this.cardInfo_3004.CARDSTAT, // 卡片状态
                CHGDATE: '', // 状态更改日期 例：20150909
                CUSTRREF: '', // 客户编号
                INPUTDATE: '', // 录入日期：20150909
                AUDITDATE: '', // 审核日期：20150909
                BARCODE: '', // 条形码
                CASECODE: '', // 原因代码
                MAINTAG: this.cardInfo_3004.MAFLAG, // 主附卡标志
                APPLYSTATE: '', // 申请状态
                CREATEDATE: '', // 制卡日期：20150909
                AMOUNT: '', // 额度，例如：当前额度
                APPAMOUNT: '', // 申请额度
                CONTRACT: '', // 16位合同号 汇丰等同 借据号
                UUID: '', // 客户号
            };
            console.log('data', data);
            for (const key in data) {
                const input = document.createElement('input');
                input.name = key;
                input.style.display = 'none';
                input.value = data[key];
                form.appendChild(input);
            };
            document.getElementById('MenuItems').appendChild(form);
            form.submit();
            // this.$router.push({ path: '/businessSystem', });
            document.getElementById('MenuItems').removeChild(form);
            // sessionStorage.setItem('loadNum', '0');
            // this.iframeFlag = false;
            // console.log(window.location, '2222222222222');

        },
    },
};
</script>
<style lang='scss'>
.formstyleNo {
    display: none;
    width: 0px;
    height: 0px;
    display: inline-block;
}
.MenuItem {
    > li.el-menu-item {
        /* padding-left: 16px !important; */
        text-align: left;
    }
    > li.el-submenu > div.el-submenu__title {
        /* padding-left: 16px !important; */
        text-align: left;
    }
}
</style>